<template>
	<!-- 规格选择区域 -->
	<view class="specs-section">
		<!-- 动态渲染规格层级 -->
		<view v-for="(specLayer, layerIndex) in specs" :key="layerIndex" class="spec-layer">
			<m-text block bold spa="0 0 20 0"> {{ specLayer.title}}</m-text>
			<view class="spec-values">
				<!-- 动态渲染规格值 -->
				<template v-for="value in getAvailableValues(layerIndex)">
					<m-tag :key="value" gap="10 30" spa="0 20 20 0" :disabled="!isValueAvailable(layerIndex, value)"
						:color="selectedValues[layerIndex] === value?'#fff':'#333'"
						:bgColor="selectedValues[layerIndex] === value?'var(--theme)':'#f6f6f6'" 
						@click="selectSpec(layerIndex, value)"> {{ value }}</m-tag>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "specs-section",
		data() {
			return {
				specs: [],
				specCombinationMap: new Map(),
				selectedValues: [] // 改为从空数组初始化
			};
		},
		props: {
			// 新增props：支持外部传入默认选中值（按层级顺序）
			defaultSelected: {
				type: Array,
				default: () => []
			},
			units: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			// 当前选择的规格单元（用于提交）
			selectedUnit() {
				const combinationKey = this.selectedValues.join('-');
				return this.specCombinationMap.get(combinationKey);
			}
		},
		watch: {
			// 监听规格数据变化时自动设置默认值
			specs: {
				handler() {
					this.setDefaultSelections();
				},
				immediate: true
			},
			units: {
				handler() {
					this.initSpecs();
				},
				immediate: true
			},
		},
		methods: {
			// 修改后的初始化方法
			initSpecs(units = this.units) {
				console.log(this.units)
				const { specs, specCombinationMap } = this.organizeSpecs(units);
				this.specs = specs;
				this.specCombinationMap = specCombinationMap;
				this.$nextTick(this.setDefaultSelections); // 数据就绪后设置默认
			},

			// 初始化时设置默认选中项
			setDefaultSelections() {
				if (!this.specs.length) return;

				// 逐层设置默认值
				const newSelected = [];
				for (let layer = 0; layer < this.specs.length; layer++) {
					// 优先使用传入的默认值
					const externalDefault = this.defaultSelected[layer];
					// 获取当前层可用的默认值（优先外部传入，否则取第一个可用值）
					const availableValues = this.getAvailableValues(layer);
					const finalDefault = availableValues.includes(externalDefault) ?
						externalDefault :
						availableValues[0];
					if (finalDefault) {
						newSelected[layer] = finalDefault;
						// 必须递归设置后续层级可用性
						this.$set(this.selectedValues, layer, finalDefault);
					} else {
						break; // 某一层无默认值时终止
					}
				}
				this.selectedValues = newSelected;
				let a = this.specCombinationMap.get(newSelected.join('-'));
				this.$emit('input', a)
			},
			// 核心逻辑：整理规格数据
			organizeSpecs(units) {
				if (!units?.length) return { specs: [], specCombinationMap: new Map() };

				// 1. 提取规格层级标题（如 ["尺寸", "颜色"]）
				const layerTitles = [];
				for (let i = 1; i <= 3; i++) {
					const title = units[0][`title${i}`];
					if (title && title.trim()) layerTitles.push(title);
				}

				// 2. 按层级去重值
				const specs = layerTitles.map((title, layerIndex) => {
					const values = [...new Set(units.map(u => u[`value${layerIndex + 1}Str`]))];
					return { title, values };
				});

				// 3. 构建组合映射表
				const specCombinationMap = new Map();
				units.forEach(unit => {
				    const keyParts = [];
				    for (let i = 0; i < layerTitles.length; i++) {
				      const val = unit[`value${i + 1}Str`];
				      if (val) keyParts.push(val);
				    }
				    const combinationKey = keyParts.join('-');
				    specCombinationMap.set(combinationKey, unit);
				  });

				return { specs, specCombinationMap };
			},

			// 获取某层级的可用值（动态过滤）
			getAvailableValues(layerIndex) {
				// 如果是第一层，直接返回所有值
				if (layerIndex === 0) return this.specs[layerIndex]?.values || [];

				// 根据已选上级值过滤当前层可用值
				const selectedUpstream = this.selectedValues.slice(0, layerIndex);
				return [
					...new Set(
						[...this.specCombinationMap.keys()]
						.filter(key => {
							const parts = key.split('-');
							return selectedUpstream.every((val, idx) => parts[idx] === val);
						})
						.map(key => key.split('-')[layerIndex])
					)
				];
			},

			// 判断值是否可选
			isValueAvailable(layerIndex, value) {
				return this.getAvailableValues(layerIndex).includes(value);
			},

			// 选择规格值
			selectSpec(layerIndex, value) {
				// 更新选择值并清空后续层级的选择
				this.$set(this.selectedValues, layerIndex, value);
				this.selectedValues.splice(layerIndex + 1);
				this.$emit('input', this.selectedUnit)
			},
		},
	}
</script>

<style lang="scss">

</style>